<template>
  <div id="app">
    <app-head></app-head>
    <app-slide></app-slide>
  
    <div class="img_list">
      <ul>
       <li>2</li>
        <li v-for="list in listMobileMenu" :key="list.menu.code">
          <router-link :to='{name:routerto(list.menu.code), query:{menuUnid:list.menu.unid}}'>
            <img :src="other[0].src" v-if="list.menu.code=='GFJY'">
            <p>{{list.menu.name}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import AppHead from '@/components/header'
import AppSlide from '@/components/slide'
import { requestLogin } from '../../api/api'
import { mapState } from 'vuex'

export default {
  components: {
    'app-head': AppHead,
    'app-slide': AppSlide
  },
  data() {
    return {
      listMobileMenu: [],
    };
  },
  computed: {
    ...mapState({
      other: state => state.managementStore.other,
    }),
  },
  methods: {
    // 选择图片
    selectImg(code) {
      if(this.datavalue==GFJY){
        this.src ="../../static/index/Management.png";
      }
   
      return this.src;
    },
    // 获取跳转name
//  routerto(code) {
//       this.goto="";
//       this.goto="List";
//       return this.goto;
//     },
    // 获取数据
    fetchData() {
      let auth = JSON.parse(localStorage.getItem('auth'));
      let option = {
        params: {
          loginname: auth.loginname,
          password: auth.password,
          ip: "",
          deviceid: ""
        }
      }
      requestLogin(option).then((res) => {
        if (res.success === true) {
          this.user = res.data.user;
          this.listMobileMenu = res.data.listMobileMenu;
        }
      })
    }
  },
  mounted() {
    this.fetchData();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
.img_list {
  max-width: 640px;
  min-width: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.img_list img {
  width:45px;
  height:45px;
  margin: 10px auto 0px;
  text-align: center;
}

.img_list li {
  -webkit-animation: fadeInUp 2s ease 0s 1 both;
  -moz-animation: fadeInUp 2s ease 0s 1 both;
  -o-animation: fadeInUp 2s ease 0s 1 both;
  animation: fadeInUp 2s ease 0s 1 both;
  float: left;
  padding: 10px 0 0 0;
  text-align: center;
  width: 33.33%;
}

.img_list li a p {
  color: #242424;
  font-size: 14px;
  text-align: center;
  min-height: 35px;
  margin-bottom: 0;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
//轮播样式重构
.indicators{
      bottom:5px !important;
}
</style>
